<template>
	<view>
		<view class="inputs">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :msodel="baseFormData">
				<uni-row>
					<uni-col :span="11">
						<uni-forms-item label="队员昵称">
							<uni-data-select v-model="baseFormData.nickName" :localdata="nick" @change="rentChange">
							</uni-data-select>
						</uni-forms-item>
					</uni-col>
					<uni-col :span="12" :offset="1">
						<uni-forms-item label="队员电话">
							<uni-data-select v-model="baseFormData.userName" :localdata="user" @change="rentChange">
							</uni-data-select>
						</uni-forms-item>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="11">
						<uni-forms-item label="交易结果">
							<uni-data-select v-model="baseFormData.payState" :localdata="status" @change="rentChange">
							</uni-data-select>
						</uni-forms-item>
					</uni-col>
					<uni-col :span="12" :offset="1">
						<uni-forms-item label="产品名称">
							<uni-data-select v-model="baseFormData.body" :localdata="product" @change="rentChange">
							</uni-data-select>
						</uni-forms-item>
					</uni-col>
				</uni-row>
			</uni-forms>
		</view>
		<view class="table">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="90">队员昵称</uni-th>
					<uni-th align="center" width="60">下级提成</uni-th>
					<uni-th align="center" width="60">队员佣金</uni-th>
					<uni-th align="center" width="60">定价</uni-th>
					<uni-th align="center" width="90">支付状态</uni-th>
					<uni-th align="center" width="40">单号</uni-th>
					<uni-th align="center" width="100">创建时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.nick_name }}</uni-td>
					<uni-td align="center">{{ item.user_name == $store.state.user.name?'本人订单': item.royalty }}</uni-td>
					<uni-td align="center">{{ item.brokerage }}</uni-td>
					<uni-td align="center">{{ item.pricing }}</uni-td>
					<uni-td align="center">{{ disStatus(item.pay_state )}}</uni-td>
					<uni-td align="center">{{ item.order_no }}</uni-td>
					<uni-td align="center">{{ item.create_time.replace('T',' ').substring(5) }}</uni-td>
				</uni-tr>
			</uni-table>
			<view>
				<uni-pagination show-icon :page-size="pageSize" :current="pageNum" :total="total" @change="change" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		distinctQuery,
		teamOrders,
		status
	} from '@/api/team'

	export default {
		data() {
			return {
				nick: [],
				product: [],
				user: [],
				status,
				// 基础表单数据
				baseFormData: {
					nickName: '',
					userName: '',
					payState: '',
					body: ''
				},
				tableData: [],
				// 每页数据量
				pageSize: 15,
				// 当前页
				pageNum: 1,
				// 数据总量
				total: 0,
				loading: false
			}
		},
		onLoad() {
			distinctQuery().then(res => {
				// console.log('---res---', res)
				this.nick = this.disDistinct(res.nick)
				this.user = this.disDistinct(res.user)
				this.product = this.disDistinct(res.product, true)
			})
			this.getData(1)
		},
		methods: {
			rentChange() {
				this.getData(1)
			},
			disDistinct(items = [], is = false) {
				let it = []
				for (let i = 0; i < items.length; i++) {
					let item
					if (is) {
						item = {
							value: items[i].product_id,
							text: items[i].product_name
						}
					} else {
						item = {
							value: items[i],
							text: items[i]
						}
					}
					it.push(item)
				}
				return it
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1)
			},
			// 获取数据
			getData(pageNum) {
				this.loading = true
				this.pageNum = pageNum
				teamOrders({
					pageSize: this.pageSize,
					pageNum: pageNum,
					...this.baseFormData
				}).then(res => {
					this.tableData = res.rows
					this.total = res.total
					this.loading = false
				})
			},
			disStatus(status) {
				if ('SUCCESS' == status) {
					return '成功'
				} else if ('REFUND' == status) {
					return '退款'
				} else if ('NOTPAY' == status) {
					return '未支付'
				} else if ('CLOSED' == status) {
					return '关闭'
				} else if ('USERPAYING' == status) {
					return '支付中'
				} else {
					return '其它'
				}
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
		height: auto;
	}

	.inputs {
		padding: 10rpx;
		margin: 8rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.table {
		margin: 0 8rpx 8rpx 8rpx;
		border-radius: 10rpx;
	}

	/* #ifndef H5 */
	/* page {
			padding-top: 85px;
	   } */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}
	
	.uni-table-td[data-v-321f8e79] {
	    display: table-cell;
	    padding: 6px 4px;
	    font-size: 13px;
	    border-bottom: 1px #EBEEF5 solid;
	    font-weight: 400;
	    color: #606266;
	    line-height: 23px;
	    box-sizing: border-box;
	}
	
	.uni-forms-item[data-v-61dfc0d0] {
	    position: relative;
	    display: flex;
	    margin-bottom: 6px;
	    flex-direction: row;
	}
</style>